<template>
  <div id="surrounding-facilities">
    <div class="warpper">
      <el-form>
        <div class="content" v-for="(item, index) in roomFacilities" :key="index">
          <el-form-item class="nameItem" prop="name">
            <el-input v-model="item.name" placeholder="请输入名称"></el-input>
            <div class="deleteItem" v-if="index !== 0">
              <i class="el-icon-delete"  @click="deleteItem(index)"></i>
            </div>
          </el-form-item>
          <el-form-item prop="description">
            <el-input type="textarea" :rows="5" v-model="item.description" placeholder="请输入详细信息"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div class="btn">
        <el-button type="text" @click="addLine">新增下一行</el-button>
      </div>
    </div>
    <div class="information-btn">
      <el-form-item>
        <el-button type="primary" @click="next" v-if="isCreate">下一步</el-button>
        <el-button type="primary" @click="back" v-if="isCreate">返回</el-button>
        <el-button type="primary" @click="next" v-if="!isCreate">保存</el-button>
        <el-button @click="back" v-if="!isCreate">关闭</el-button>
      </el-form-item>
    </div>
  </div>

</template>
<script>
import {updateFacilities} from '@/public/js/room.js'
const ButtonFooter = () => import('@/components/common/ButtonFooter')
export default {
  props: {
    roomFacilities: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      datas: {
        'timestamp': 0,
        'version': 'string',
        'operation': 'string',
        'roomId': sessionStorage.getItem('roomId'),
        'roomFacilitiesEntities': this.roomFacilities
      },
      isCreate: false
    }
  },
  created () {
    console.log(this.roomFacilities)
    this.isCreate = JSON.parse(sessionStorage.getItem('isCreate'))
  },
  computed: {
    data () {
      return this.roomFacilities
    }
  },
  methods: {
    addLine () {
      this.roomFacilities.push({ name: '', description: '' })
    },
    deleteItem (index) {
      this.roomFacilities.splice(index, 1)
    },
    saveForm () {
      console.log(this.roomFacilities)
    },
    back () {
      this.$router.go(-1)
    },
    next () {
      this.datas.roomFacilitiesEntities = this.roomFacilities
      this.datas.roomId = sessionStorage.getItem('roomId')
      console.log('this.datas', this.datas)
      updateFacilities(this.datas).then(res => {
        console.log(res)
        if (!res.data.errCode) {
          if (this.isCreate) {
            this.$emit('input', 'third')
          } else {
            this.$message.success('保存成功')
          }
        }
      })
    }
  },
  components: {
    ButtonFooter
  }
}
</script>

<style lang="scss">
.warpper {
  width: 60%;
  padding: 0 20px;
  .el-form-item {
    margin-bottom: 30px;
  }
  .btn {
    text-align: left;
  }
}
.content {
  width: 70%;
  .nameItem {
    width: 50%;
    position: relative;
    .deleteItem {
      position: absolute;
      right: -20px;
      bottom: 0;
    }
  }
}
</style>
